<template>
  <div>
    <el-card class="main_card">
      <el-row>
        <el-col :span="2" v-has-role="['ROLE_ADMIN']">
          <el-upload
            ref="upload"
            :on-remove="handleRemove"
            :auto-upload="false"
            :action="importUrl"
            :headers="headers"
            name="file"
            :multiple="false"
            :show-file-list="false"
            :on-change="handleChangeAttachment"
            :on-success="successFile"
             >
            <el-button type="warning">文件上传</el-button>
          </el-upload>
        </el-col>

      </el-row>
      <el-table :data="tableList"
                stripe v-loading="loading"
                element-loading-text="玩命加载中"
                element-loading-spinner="el-icon-loading">
        <el-table-column type="index" label="序号" />
        <el-table-column prop="name" label="文件名" />
        <el-table-column prop="createUser" label="上传者" />
        <el-table-column fixed="right" label="操作" width="220">
          <template slot-scope="scope" >
            <el-button type="primary"  @click="update(scope.row)" v-hasPermi="['PRE_UPDATE']" icon="el-icon-edit" circle/>
            <el-button type="danger" @click="deleteById(scope.row.id)" v-hasPermi="['PRE_DELETE']" icon="el-icon-delete" circle/>
            <el-button type="info" @click="openFile1(scope.row)" v-hasPermi="['PRE_DELETE']" icon="el-icon-folder" circle/>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total>0"
        @size-change="handlePageSize"
        @current-change="handlePageNumber"
        :current-page="queryInfo.pageNumber"
        :page-sizes="[7, 15, 50, 100]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"/>

    </el-card>
    <!--表单添加修改-->
    <el-dialog :title="title" :visible.sync="open" width="40%" @close="dialogClose">
      <el-form :model="form" ref="form" :rules="rules">
        <el-form-item label="文件名"  prop="name">
          <el-input v-model="form.name "/>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clickCancel">取 消</el-button>
        <el-button type="primary" @click="clickOK">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
    export  default {
        data(){
            return{
                //分页查询条件
                queryInfo:{
                    //页码
                    pageNumber:1,
                    //页数
                    pageSize:7,
                    //关键字
                    queryString:null
                },
                //表格数据
                tableList:[],
                filelist_temp: [],
                sysFile:[],
                //总记录数
                total:0,
                //表单的标题
                title:null,
                //是否打开对话框
                open:false,
                //加载
                loading:false,
                //表单数据
                form:{},
                //表单校验
                rules:{
                    name:[
                        { required: true, message: '请输入文件名', trigger: 'blur' },
                    ],

                },
                importUrl: process.env.VUE_APP_BASE_URL + '/tool/upload',
                headers: {
                    Authorization : sessionStorage.getItem('token')
                },
            }
        },
        /*页面初始化调用方法*/
        created() {
            this.findPage();
        },
        methods:{
            insert(){
                this.title='新增血压体检报告';
                this.open=true;
            },
            update(row){
                this.form=row;
                this.title='修改文件名';
                this.open=true;
            },
            /*分页查询*/
            findPage(){
                this.loading=true;
                this.$ajax.post('/food/file/findPage',this.queryInfo).then((res)=>{
                    this.loading=false;
                    this.tableList=res.data.data.rows;
                    console.log(res.data.data,"1")
                    this.total=res.data.data.total;
                });
            },
            /*页码改变事件*/
            handlePageNumber(newPageNumber){
                //将分页的新数据赋值给分页参数
                this.queryInfo.pageNumber=newPageNumber;
                //调分页的方法
                this.findPage();
            },
            /*页数改变的事件*/
            handlePageSize(newPageSize){
                this.queryInfo.pageSize=newPageSize;
                this.findPage();

            },
            deleteById(id){
                this.$confirm('您将删除编号为('+id+')的数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //调后端的退出接口
                    this.$ajax.delete(`/food/delete/file/${id}`).then((res)=>{
                        this.$message.success(res.data.message);
                        this.findPage();
                        this.queryInfo.pageNumber=1;
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            handleRemove(file,filelist) {
                //this.filelist = filelist  //这种方式无法触发手动上传动作
                filelist.splice(0,1)
                this.file_list_temp = filelist
                this.$forceUpdate()
            },
            importSuccess(res, file) {
                if (!res.flag) return this.$message.error(res.message);
                //导入成功
                this.$message.success(res.message);
                this.findPage();
            },
            successFile(response, file, fileList){
               console.log(response,"sasa")
               console.log(file,"sasa")
               console.log(fileList,"sasa")
            },
            /*关闭对话框的事件*/
            dialogClose(){
                this.$refs.form.resetFields();
            },
            /*点击取消*/
            clickCancel(){
                this.form={};
                this.open=false;
                this.findPage();
            },
            /*点击确定*/
            clickOK(){
                //进行表单校验
                this.$refs.form.validate((valid)=>{
                    //校验不通过
                    if(!valid) return this.$message.error('表单校验不通过，请检查后提交！');
                    //校验通过
                    if(this.form.id===undefined || this.form.id===null){
                        this.$ajax.post('/food/insert/blood',this.form).then(res=>{
                            this.$message.success(res.data.message);
                            this.open=false;
                            this.findPage();
                        });
                    }else {
                        this.$ajax.post('/food/update/file',this.form).then(res=>{
                            console.log(this.form.id,"asssss")
                            console.log(this.form,"11")
                            this.$message.success(res.data.message);
                            this.open=false;
                            this.findPage();
                        });

                    }

                });

            },
            handleChangeAttachment(file,filelist) {
                    if(file.status === 'ready') {
                        this.$refs.upload.submit();
                    }else if(file.status === 'success') {
                        this.sysFile=[]
                        console.log(file,"sasasasa")
                        let item = {
                            fileName:file.response.data,
                            fileSize: file.size,
                            uuid:file.uid,
                        }
                        this.sysFile.push(item)
                        console.log(this.sysFile,"sasa")
                        this.$ajax.post('/food/file/save',this.sysFile).then(res=>{
                            console.log(this.form.id,"asssss")
                            console.log(this.form,"11")
                            this.$message.success(res.data.message);
                            this.open=false;
                            this.findPage();
                        });
                        this.$message({
                            type: 'success',
                            message: '上传文件成功！'
                        })
                    }else {
                        this.$message({
                            type: 'error',
                            message: '上传文件失败，请重试！'
                        })
                    }
                },
            openFile1(item){
                console.log(item,"sasa")
                //  window.open(item.previewPath);
                // this.$ajax.post('/food/downLoadDailyByUrl',item).then(res=>{
                //
                //
                // });
                window.open(  'http://xllbyte.top/'+item.fileName );
            }

        }

    }
</script>
<style scoped>

</style>
